<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	header,#orderlist{
		width:800px;
		margin: 10px auto;
	}
	#orderlist section ul li{
		list-style: none;
		height: 50px;
		line-height: 50px;
		text-shadow: 2px 3px 2px #ccc;
		padding: 20px auto 20px auto;
		border-bottom: 1px solid #000;

	}
	</style>
</head>
<body>
	<header>
		<strong id="title">省份列表</strong>
	</header>
	<div id="orderlist">
		<section class="wrapper">
			<ul id="add_province">

			</ul>
		</section>
	</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script type="text/javascript">
	var get_ul=$("#add_province");
	//alert(get_ul.value);

	window.onload=msg();

	function msg(){
		var url="http://dic.souche.com/api/v1/queryDictionaries.json"
		$.ajax({
			type:"post",
			url:url,
			timeout:10000,
			data:"typeCode=area",
			dataType:'json',
			success:function(data){
				if(data.code=="200"){
					var list=data.data;
					for(var i=0;i<list.length;i++){
						var list_province="<li code="+list[i].code+" province="+list[i].name+">"+list[i].name+"</li>";						
						get_ul.append(list_province);						
					}

			
					// $("#add_province li").click(function() {
					// 	var code = $(this).attr('code');
					// 	var province = $(this).attr('province')
					// 	alert(province+','+code+','+$(this).index())
					// });

					// $('li').on('click',function(){
				 //        console.log(str) ;
				 //        str= $(this).index();
				 
				 //    })

					$("ul li").click(function(){
						var index=$(this).index();
						var code = list[index].code;
						var provinceName = list[index].name;
						getCity(provinceName,code);
						console.log('province:'+provinceName+',code:'+code);
					})
					
					

				}
			},
			error:function(xhr,type){
				alert(xhr,type);
				alert("网络超时");
			}
		});
	}
	function getCity(province,code){
		$("#title").replaceWith("<strong>"+province+"列表</strong>");
		var url_city="http://dic.souche.com/api/v1/queryDictionaryElements.json"

		$.ajax({
			type:"post",
			url:url_city,
			timeout:10000,
			data:"typeCode=area&parentCode="+code,
			dataType:'json',
			success:function(data){
				if(data.code="200"){
					var list_city=data.data;
					var ul=$("ul");
					$("li").remove();
					for(var i=0;i<list_city.length;i++){
						var li_city="<li>"+list_city[i].name+"</li>";
						ul.append(li_city);
						console.log(list_city[i].name+"\n");
					}
				}
			}

		})

		// alert(code)
			// for(var i=0;i<list.length:i++){
			// 			list[i].name.click=function(){
			// 				var url_city="http://dic.souche.com/api/v1/queryDictionaryElements.json"
			// 				$.ajax({
			// 					type:"post",
			// 					url:url_city,
			// 					timeout:10000,
			// 					date:"typeCode=area&parentCode=00419",
			// 					dataType:'json',
			// 					success:function(data){
			// 						if(data.code="200"){
			// 							var list_city=data.data;
			// 							for(var i=0;i<list.length;i++){
			// 								document.write("")
			// 							}
			// 						}
			// 					}

			// 				})
			// 			}
			// 		}

	}
	

</script>
</body>
</html>